<template>
        <div class="backgroud">
                <div class="mui-content">
                        <div class="mui-input-group">
                            <div class="mui-input-row">
                                <input type="number" class="mui-input-clear mui-input" placeholder="输入手机号" v-model="phoneNumber">
                            </div>
                            <div class="mui-input-row">
                                <label style="color: #C0C0C0;" v-if="yzflag">{{timemessage}}</label>
                                <label style="color: rgb(26, 131, 250);" v-if="!yzflag" @click="sendYZM">获取验证码</label>
                                <input type="number" class="mui-input-clear mui-input" placeholder="输入验证码" v-model="phoneyzm">
                            </div>
                            <div class="mui-input-row">
                                <input type="password" class="mui-input-clear mui-input" placeholder="请输入新密码" v-model="newpassword">
                            </div>
                            <div class="mui-input-row">
                                <input type="password" class="mui-input-clear mui-input" placeholder="请确认新密码" v-model="requrtnewpassword">
                            </div>
                        </div>
    
                        <div class="mui-content-padded">
                            <button id='reg' class="mui-btn mui-btn-block mui-btn-primary" @click="forgetPassword">立即修改</button>
                        </div>
                </div>
                </div>
    </template>
    
    <script>
		import CryptoJS from 'crypto-js'
		import {Toast} from 'mint-ui'
        export default{
			data() {
				return {
					yzflag:true,
					phoneNumber:'',
					timemessage:'获取验证码',
					seconds:10,
					intervalId:'',
					changepassword:false,
					phoneyzm:'',
					newpassword:'',
					requrtnewpassword:'',
				}
			},	
			watch: {
				phoneNumber(newVal){
					if(newVal!=null&&newVal!=''){
                        this.yzflag = false;
                        this.stopTimes();
                        this.seconds = 10;
					}else if(newVal==null||newVal.trim()==''){              
                        this.stopTimes();
                        this.newYzmMessage();
                        this.seconds = 10;
						this.yzflag = true;
					}
				},
				seconds(newVal){
                    if(this.intervalId==null){
                        this.newYzmMessage();
                    }else{
                        this.oldYzmMessage();
                    }
					if(newVal==0){
						this.stopTimes();
                        this.seconds=10;
						this.yzflag=false;
                    }
				},
				
			},

			methods: {
				sendYZM(){
					this.oldYzmMessage();
					this.minusTimes();
					this.yzflag = true;
					this.axios.post('http://zxdc.catsic.com:9090/sampling/code/sendmessagecode',{'data':{"mobilePhone":this.phoneNumber,"useType":"1"}},{
                         'headers':{
                             'Content-Type':'application/json',
                            }
                            }).then(result=>{
								if(result.data.status == "1000"){
									this.changepassword = true
									console.log(result);
									return;
								}else if(result.data.status == "4001"||result.data.status == "5005"||result.data.status == "1002"){
                                    this.dateFlag = true;
                                    this.sessionId = "";
                                    localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                    this.$store.commit("outLogin");
                                    this.msg = result.data.msg;
                                    Toast(this.msg);
                                    this.$router.push({
                                        path:'/login'
                                    });
                                }else{
									this.changepassword = false;
									Toast(result.data.msg);
									return;
								}								
						})
				},
				oldYzmMessage(){
					this.timemessage = "重新发送("+this.seconds+")";
                },
                newYzmMessage(){
                    this.timemessage="获取验证码";
                },
				minusTimes(){//开始定时器
					this.intervalId = setInterval(() => {
						this.seconds=this.seconds-1;
                 }, 1000)
				},
				stopTimes(){
					// 停止定时器
					clearInterval(this.intervalId);
					// 每当清除了定时器之后，需要重新把 intervalId 置为 null
                    this.intervalId = null;
				},
				forgetPassword(){
					var requrtnewpassword = this.set(this.requrtnewpassword,'CYDCxtaesmy2046j');
					if(this.requrtnewpassword!=this.newpassword){
						Toast("两次输入的密码不一致");
						return;
					}else if(this.changepassword == true){
						this.axios.post('http://zxdc.catsic.com:9090/sampling/user/findpwd',{'data':{"mobilePhone":this.phoneNumber,"messageCode":this.phoneyzm,"password":requrtnewpassword}},{
                         'headers':{
                             'Content-Type':'application/json',
                            }
                            }).then(result=>{
								if(result.data.status == "1000"){
									Toast("修改成功，请登录");
									this.$router.push({
                                            path:'/login'
                                        });
									console.log(result);
								}else if(result.data.status == "4001"||result.data.status == "5005"||result.data.status == "1002"){
                                    this.dateFlag = true;
                                    this.sessionId = "";
                                    localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                    this.$store.commit("outLogin");
                                    this.msg = result.data.msg;
                                    Toast(this.msg);
                                    this.$router.push({
                                        path:'/login'
                                    });
                                }else{
									Toast(result.data.msg);
									return;
								}								
						})
					}
				},
				set(word, keyStr){ 
                    keyStr = keyStr ? keyStr : 'CYDCxtaesmy2046j';   //16位的密钥，自己定义，和下面的密钥要相同
                    var key  = CryptoJS.enc.Utf8.parse(keyStr);
                    var srcs = CryptoJS.enc.Utf8.parse(word);
                    var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
                    return encrypted.toString();
                },
                //解密
                get(word, keyStr){  
                    keyStr = keyStr ? keyStr : 'CYDCxtaesmy2046j';
                    var key  = CryptoJS.enc.Utf8.parse(keyStr);
                    var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
                    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
				},
			},

		}
    </script>
    
    <style lang="scss" scoped>
        .mui-btn {
				padding: 10px;
				height: 100%;
			}
			
			.mui-input-group {
				background: transparent;
				margin-left: 8%;
				margin-right: 8%;
				border: none !important;
			}
			
			.mui-input-group:after {
				height: 0px;
			}
			
			.mui-input-group:before {
				height: 0px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-input-row label {
				float: right;
				width: 50%;
				font-size: 15px;
			}
			
			.mui-input-row label~input {
				float: left;
				width: 40%;
				padding-left: 15px;
			}
        
    </style>